<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站多行二级栏目展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #EEF2FF;
            --secondary: #EC4899;
            --dark: #1E293B;
            --light: #F8FAFC;
            --gray: #64748B;
            --light-gray: #F1F5F9;
            --border: #E2E8F0;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --radius: 8px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 2rem;
            padding-bottom: 4rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }
        
        .page-subtitle {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 导航栏目通用样式 */
        .navigation-section {
            margin-bottom: 4rem;
            padding: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .section-header {
            margin-bottom: 1.75rem;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .section-description {
            color: var(--gray);
            font-size: 0.95rem;
        }
        
        /* 基础多行二级栏目 */
        .basic-navigation {
            background-color: var(--light-gray);
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .main-categories {
            display: flex;
            flex-wrap: wrap;
            background-color: white;
            border-bottom: 1px solid var(--border);
        }
        
        .main-category {
            padding: 0.85rem 1.5rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            border-bottom: 3px solid transparent;
        }
        
        .main-category:hover {
            background-color: var(--light-gray);
        }
        
        .main-category.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .subcategories {
            padding: 1rem 1.5rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem 1.5rem;
        }
        
        .subcategory {
            padding: 0.4rem 0;
            color: var(--gray);
            text-decoration: none;
            transition: all 0.2s ease;
            position: relative;
            white-space: nowrap;
        }
        
        .subcategory:hover {
            color: var(--primary);
        }
        
        .subcategory.active {
            color: var(--primary);
            font-weight: 500;
        }
        
        .subcategory.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary);
            border-radius: 1px;
        }
        
        /* 卡片式多行二级栏目 */
        .card-navigation {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.5rem;
        }
        
        .category-card {
            border-radius: var(--radius);
            padding: 1.25rem;
            background-color: var(--light-gray);
            transition: all 0.3s ease;
        }
        
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
            background-color: white;
            border: 1px solid var(--border);
        }
        
        .category-card.active {
            background-color: var(--primary-light);
            border: 1px solid var(--primary);
        }
        
        .category-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background-color: rgba(79, 70, 229, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }
        
        .category-card-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
        }
        
        .card-subcategories {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .card-subcategory {
            color: var(--gray);
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .card-subcategory:hover {
            color: var(--primary);
            padding-left: 0.5rem;
        }
        
        .card-subcategory.active {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 图标式多行二级栏目 */
        .icon-navigation {
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            overflow: hidden;
        }
        
        .icon-main-categories {
            display: flex;
            overflow-x: auto;
            scrollbar-width: thin;
            border-bottom: 1px solid var(--border);
        }
        
        .icon-main-category {
            flex: 0 0 auto;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .icon-main-category:hover {
            background-color: var(--light-gray);
        }
        
        .icon-main-category.active {
            color: var(--primary);
        }
        
        .main-category-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }
        
        .main-category-name {
            font-size: 0.85rem;
            white-space: nowrap;
        }
        
        .icon-subcategories {
            padding: 1.25rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 1rem;
        }
        
        .icon-subcategory {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem 0.5rem;
            border-radius: var(--radius);
            text-decoration: none;
            color: var(--dark);
            transition: all 0.2s ease;
        }
        
        .icon-subcategory:hover {
            background-color: var(--light-gray);
            transform: scale(1.03);
        }
        
        .icon-subcategory.active {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .subcategory-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background-color: rgba(79, 70, 229, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            margin-bottom: 0.75rem;
        }
        
        .subcategory-name {
            font-size: 0.85rem;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
        
        /* 紧凑式多行二级栏目 */
        .compact-navigation {
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            padding: 1rem;
        }
        
        .compact-section {
            margin-bottom: 1.5rem;
        }
        
        .compact-section:last-child {
            margin-bottom: 0;
        }
        
        .compact-main-category {
            font-weight: 600;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--dark);
        }
        
        .compact-main-category i {
            color: var(--primary);
        }
        
        .compact-subcategories {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .compact-subcategory {
            padding: 0.35rem 0.85rem;
            background-color: var(--light-gray);
            border-radius: 20px;
            font-size: 0.85rem;
            text-decoration: none;
            color: var(--gray);
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        
        .compact-subcategory:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .compact-subcategory.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .card-navigation {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            
            .icon-subcategories {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.85rem;
            }
            
            .main-category {
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }
            
            .subcategories {
                gap: 0.5rem 1rem;
            }
            
            .card-navigation {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
            
            .category-card-icon {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
        }
        
        @media (max-width: 576px) {
            .section-title {
                font-size: 1.35rem;
            }
            
            .card-navigation {
                grid-template-columns: 1fr 1fr;
            }
            
            .icon-subcategories {
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            }
            
            .subcategory-name {
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">社交网站多行二级栏目展示</h1>
            <p class="page-subtitle">多种风格的二级栏目导航结构，满足不同内容分类和用户浏览习惯</p>
        </div>
        
        <!-- 1. 基础多行二级栏目 - 适合内容分类清晰的导航场景 -->
        <div class="navigation-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-list"></i> 基础多行二级栏目</h2>
                <p class="section-description">简洁的主分类与二级分类结构，适合内容分类明确的社交平台主导航</p>
            </div>
            
            <div class="basic-navigation">
                <!-- 主分类 -->
                <div class="main-categories">
                    <div class="main-category active">首页</div>
                    <div class="main-category">发现</div>
                    <div class="main-category">关注</div>
                    <div class="main-category">话题</div>
                    <div class="main-category">活动</div>
                    <div class="main-category">消息</div>
                    <div class="main-category">个人中心</div>
                </div>
                
                <!-- 二级分类 - 首页 -->
                <div class="subcategories">
                    <a href="#" class="subcategory active">推荐内容</a>
                    <a href="#" class="subcategory">热门动态</a>
                    <a href="#" class="subcategory">最新发布</a>
                    <a href="#" class="subcategory">关注更新</a>
                    <a href="#" class="subcategory">附近动态</a>
                    <a href="#" class="subcategory">精选专题</a>
                    <a href="#" class="subcategory">官方公告</a>
                </div>
            </div>
        </div>
        
        <!-- 2. 卡片式多行二级栏目 - 适合内容板块独立的导航场景 -->
        <div class="navigation-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-th-large"></i> 卡片式多行二级栏目</h2>
                <p class="section-description">以卡片形式展示主分类，每个卡片包含独立的二级分类，适合内容板块区分明显的社交平台</p>
            </div>
            
            <div class="card-navigation">
                <!-- 兴趣爱好分类 -->
                <div class="category-card active">
                    <div class="category-card-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3 class="category-card-title">兴趣爱好</h3>
                    <div class="card-subcategories">
                        <a href="#" class="card-subcategory active"><i class="fas fa-chevron-right fa-xs"></i> 摄影</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 音乐</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 读书</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 电影</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 旅行</a>
                    </div>
                </div>
                
                <!-- 生活分类 -->
                <div class="category-card">
                    <div class="category-card-icon">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3 class="category-card-title">生活</h3>
                    <div class="card-subcategories">
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 美食</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 健身</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 穿搭</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 家居</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 宠物</a>
                    </div>
                </div>
                
                <!-- 知识分类 -->
                <div class="category-card">
                    <div class="category-card-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="category-card-title">知识</h3>
                    <div class="card-subcategories">
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 科学</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 历史</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 心理学</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 哲学</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 语言</a>
                    </div>
                </div>
                
                <!-- 科技分类 -->
                <div class="category-card">
                    <div class="category-card-icon">
                        <i class="fas fa-microchip"></i>
                    </div>
                    <h3 class="category-card-title">科技</h3>
                    <div class="card-subcategories">
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 互联网</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 编程</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 人工智能</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 数码产品</a>
                        <a href="#" class="card-subcategory"><i class="fas fa-chevron-right fa-xs"></i> 区块链</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 3. 图标式多行二级栏目 - 适合视觉导向的导航场景 -->
        <div class="navigation-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-icons"></i> 图标式多行二级栏目</h2>
                <p class="section-description">以图标为主的导航结构，视觉性强，适合移动优先的社交平台或内容浏览页</p>
            </div>
            
            <div class="icon-navigation">
                <!-- 主分类 -->
                <div class="icon-main-categories">
                    <div class="icon-main-category active">
                        <div class="main-category-icon">
                            <i class="fas fa-image"></i>
                        </div>
                        <div class="main-category-name">图片</div>
                    </div>
                    <div class="icon-main-category">
                        <div class="main-category-icon">
                            <i class="fas fa-video"></i>
                        </div>
                        <div class="main-category-name">视频</div>
                    </div>
                    <div class="icon-main-category">
                        <div class="main-category-icon">
                            <i class="fas fa-music"></i>
                        </div>
                        <div class="main-category-name">音乐</div>
                    </div>
                    <div class="icon-main-category">
                        <div class="main-category-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="main-category-name">文章</div>
                    </div>
                    <div class="icon-main-category">
                        <div class="main-category-icon">
                            <i class="fas fa-comments"></i>
                        </div>
                        <div class="main-category-name">话题</div>
                    </div>
                    <div class="icon-main-category">
                        <div class="main-category-icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div class="main-category-name">活动</div>
                    </div>
                </div>
                
                <!-- 二级分类 - 图片 -->
                <div class="icon-subcategories">
                    <a href="#" class="icon-subcategory active">
                        <div class="subcategory-icon">
                            <i class="fas fa-camera"></i>
                        </div>
                        <div class="subcategory-name">摄影作品</div>
                    </a>
                    <a href="#" class="icon-subcategory">
                        <div class="subcategory-icon">
                            <i class="fas fa-paint-brush"></i>
                        </div>
                        <div class="subcategory-name">插画手绘</div>
                    </a>
                    <a href="#" class="icon-subcategory">
                        <div class="subcategory-icon">
                            <i class="fas fa-crop-alt"></i>
                        </div>
                        <div class="subcategory-name">设计作品</div>
                    </a>
                    <a href="#" class="icon-subcategory">
                        <div class="subcategory-icon">
                            <i class="fas fa-camera-retro"></i>
                        </div>
                        <div class="subcategory-name">手机摄影</div>
                    </a>
                    <a href="#" class="icon-subcategory">
                        <div class="subcategory-icon">
                            <i class="fas fa-mountain"></i>
                        </div>
                        <div class="subcategory-name">风景摄影</div>
                    </a>
                    <a href="#" class="icon-subcategory">
                        <div class="subcategory-icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="subcategory-name">人像摄影</div>
                    </a>
                    <a href="#" class="icon-subcategory">
                        <div class="subcategory-icon">
                            <i class="fas fa-utensils"></i>
                        </div>
                        <div class="subcategory-name">美食摄影</div>
                    </a>
                    <a href="#" class="icon-subcategory">
                        <div class="subcategory-icon">
                            <i class="fas fa-camera-movie"></i>
                        </div>
                        <div class="subcategory-name">胶片摄影</div>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 4. 紧凑式多行二级栏目 - 适合内容分类较多的导航场景 -->
        <div class="navigation-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-th"></i> 紧凑式多行二级栏目</h2>
                <p class="section-description">高密度的标签式导航结构，适合分类众多且需要快速切换的社交平台内容页</p>
            </div>
            
            <div class="compact-navigation">
                <!-- 职业分类 -->
                <div class="compact-section">
                    <div class="compact-main-category">
                        <i class="fas fa-briefcase"></i> 职业
                    </div>
                    <div class="compact-subcategories">
                        <a href="#" class="compact-subcategory active">程序员</a>
                        <a href="#" class="compact-subcategory">设计师</a>
                        <a href="#" class="compact-subcategory">产品经理</a>
                        <a href="#" class="compact-subcategory">市场运营</a>
                        <a href="#" class="compact-subcategory">教师</a>
                        <a href="#" class="compact-subcategory">医生</a>
                        <a href="#" class="compact-subcategory">律师</a>
                        <a href="#" class="compact-subcategory">创业者</a>
                        <a href="#" class="compact-subcategory">自由职业</a>
                        <a href="#" class="compact-subcategory">更多</a>
                    </div>
                </div>
                
                <!-- 兴趣分类 -->
                <div class="compact-section">
                    <div class="compact-main-category">
                        <i class="fas fa-gamepad"></i> 兴趣
                    </div>
                    <div class="compact-subcategories">
                        <a href="#" class="compact-subcategory">游戏</a>
                        <a href="#" class="compact-subcategory">动漫</a>
                        <a href="#" class="compact-subcategory">追剧</a>
                        <a href="#" class="compact-subcategory">追星</a>
                        <a href="#" class="compact-subcategory">健身</a>
                        <a href="#" class="compact-subcategory">美食</a>
                        <a href="#" class="compact-subcategory">旅行</a>
                        <a href="#" class="compact-subcategory">摄影</a>
                        <a href="#" class="compact-subcategory">音乐</a>
                        <a href="#" class="compact-subcategory">更多</a>
                    </div>
                </div>
                
                <!-- 内容类型分类 -->
                <div class="compact-section">
                    <div class="compact-main-category">
                        <i class="fas fa-file-alt"></i> 内容类型
                    </div>
                    <div class="compact-subcategories">
                        <a href="#" class="compact-subcategory">问答</a>
                        <a href="#" class="compact-subcategory">文章</a>
                        <a href="#" class="compact-subcategory">短视频</a>
                        <a href="#" class="compact-subcategory">长视频</a>
                        <a href="#" class="compact-subcategory">图集</a>
                        <a href="#" class="compact-subcategory">直播</a>
                        <a href="#" class="compact-subcategory">活动</a>
                        <a href="#" class="compact-subcategory">投票</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 基础导航主分类切换
            const mainCategories = document.querySelectorAll('.main-category');
            mainCategories.forEach(category => {
                category.addEventListener('click', function() {
                    // 移除其他主分类的active状态
                    mainCategories.forEach(cat => cat.classList.remove('active'));
                    // 添加当前主分类的active状态
                    this.classList.add('active');
                    
                    // 在实际应用中，这里会根据主分类加载对应的二级分类
                });
            });
            
            // 卡片式导航主分类切换
            const categoryCards = document.querySelectorAll('.category-card');
            categoryCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 移除其他卡片的active状态
                    categoryCards.forEach(c => c.classList.remove('active'));
                    // 添加当前卡片的active状态
                    this.classList.add('active');
                });
            });
            
            // 卡片式导航二级分类切换
            const cardSubcategories = document.querySelectorAll('.card-subcategory');
            cardSubcategories.forEach(sub => {
                sub.addEventListener('click', function(e) {
                    e.stopPropagation(); // 防止事件冒泡到父元素
                    
                    // 移除同卡片内其他二级分类的active状态
                    const parentCard = this.closest('.category-card');
                    parentCard.querySelectorAll('.card-subcategory').forEach(s => {
                        s.classList.remove('active');
                    });
                    
                    // 添加当前二级分类的active状态
                    this.classList.add('active');
                });
            });
            
            // 图标式导航主分类切换
            const iconMainCategories = document.querySelectorAll('.icon-main-category');
            iconMainCategories.forEach(category => {
                category.addEventListener('click', function() {
                    // 移除其他主分类的active状态
                    iconMainCategories.forEach(cat => cat.classList.remove('active'));
                    // 添加当前主分类的active状态
                    this.classList.add('active');
                    
                    // 在实际应用中，这里会根据主分类加载对应的二级分类
                });
            });
            
            // 图标式导航二级分类切换
            const iconSubcategories = document.querySelectorAll('.icon-subcategory');
            iconSubcategories.forEach(sub => {
                sub.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除其他二级分类的active状态
                    iconSubcategories.forEach(s => s.classList.remove('active'));
                    // 添加当前二级分类的active状态
                    this.classList.add('active');
                });
            });
            
            // 紧凑式导航二级分类切换
            const compactSubcategories = document.querySelectorAll('.compact-subcategory');
            compactSubcategories.forEach(sub => {
                sub.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除同组内其他二级分类的active状态
                    const parentSection = this.closest('.compact-section');
                    parentSection.querySelectorAll('.compact-subcategory').forEach(s => {
                        s.classList.remove('active');
                    });
                    
                    // 添加当前二级分类的active状态
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>
    
